<template>
    <!-- 编辑毕业生信息 -->
  <div class="EditGraduateInfo" v-loading="loading">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="学号" prop="sNo">
            <el-input v-model="form.sNo" placeholder="请输入学号" @blur="querysName" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="sName" :show-message="false">
            <el-input v-model="form.sName" placeholder="请输入姓名" disabled></el-input>
        </el-form-item>
        <div class = "clearfix">
            <div style = "width:50%;" class = "fl">
                <el-form-item label="指导老师" :show-message="false">
                    <el-select v-model="form.instructorId" placeholder="请选择指导老师">
                        <el-option v-for="item in instructorData" :key="item.iNo" :label="item.instructorName" :value="item.instructorId"></el-option>
                    </el-select>
                </el-form-item>
            </div>
            <div style = "width:50%;" class = "fl">
                <el-form-item label="就业方向">
                    <el-select v-model="form.workDirection" placeholder="请选择就业方向" >
                        <el-option v-for="item in workDirectionList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </div>
        </div>
        <el-form-item label="城市">
            <el-input v-model="form.city" placeholder="请输入城市"></el-input>
        </el-form-item>
        <el-form-item label="是否专业对口">
            <el-select v-model="form.isCounterpart" placeholder="请选择就业方向" :disabled="form.workDirection != '1'">
                <el-option v-for="item in counterpartList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="就业单位">
            <el-input v-model="form.workUnit" placeholder="请输入就业单位" :disabled="form.workDirection != '1'"></el-input>
        </el-form-item>
        <el-form-item label="就业岗位">
            <el-input v-model="form.workPost" placeholder="请输入就业岗位" :disabled="form.workDirection != '1'"></el-input>
        </el-form-item>
        <el-form-item label="单位规模">
            <el-input v-model="form.workScale" placeholder="请输入单位规模" :disabled="form.workDirection != '1'"></el-input>
        </el-form-item>
        <el-form-item label="就业月份">
            <el-input v-model="form.workMonth" placeholder="请输入就业月份" :disabled="form.workDirection != '1'"></el-input>
        </el-form-item>
        <el-form-item label="行业">
            <el-input v-model="form.industry" placeholder="请输入行业" :disabled="form.workDirection != '1'"></el-input>
        </el-form-item>
        <el-form-item label="薪资">
            <el-input v-model="form.salary" placeholder="请输入薪资" :disabled="form.workDirection != '1'"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone" >
            <el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
import {_addGraInfo, _editGraInfoById, _querySname} from '../../network/graduate.js'

export default {
  name: 'EditGraduateInfo',
  props: ['graData','instructorData'],
  data () {
    var checkphone = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请输入手机号'))
        } else if (!this.isCellPhone(value)) { // 引入methods中封装的检查手机格式的方法
            callback(new Error('请输入正确的手机号!'))
        } else {
            callback()
        }
    }
    var checkSno = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请填写学号'))
        } else if (!this.isCellSno(value)) { // 引入methods中封装的检查手机格式的方法
            callback(new Error('请填写正确的学号!'))
        } else {
            callback()
        }
    }
    return {    
        form: {},
        rules: {
            sNo: [
                { required: true, validator: checkSno, trigger: 'blur' }
            ],
            sName: [
                { required: true, message: '请填写姓名', trigger: 'blur' }
            ],
            instructorId: [
                { required: true, message: '请选择指导老师', trigger: 'blur' }
            ],
            phone: [
                { required: true, validator: checkphone, trigger: 'blur' }
            ]
        },
        loading: false,        //加载
        workDirectionList: [
            { label:"就业",value:1 },
            { label:"创业",value:2 },
            { label:"考研",value:3 },
            { label:"考公",value:4 },
            { label:"其他",value:5 },
        ],
        counterpartList: [
            { label:"对口",value:1 },{ label:"不对口",value:2 }
        ]
    }
  },
  mounted () {
      this.form = this.graData
  },
  methods: {
    /* 提交 */
    onSubmit () {
        this.$refs['form'].validate((valid) => {
            if (valid) {
                this.loading = true
                let token = typeof(localStorage.getItem("token")) != 'undefined' ? localStorage.getItem("token") : ''
                let req = this.$axios.post(
                    '/api/graduateInfo/editGraInfoById',
                    this.form,
                    {
                        headers: {
                            'token':token
                        }
                    }
                ).then(res => {
                    if(res.data.code === 200){
                        this.$message.success('修改成功')
                        setTimeout(() => {
                            this.$parent.$parent.closeEditGra()
                            /* 刷新父组件表格 */
                            this.$parent.$parent.reloadt()
                        },1000)
                    }
                    else{
                        this.$message.error(res.data.msg)
                    }
                }).catch(res => {
                    this.$message.error('修改失败，请联系管理员')
                })
                this.complete(req, () => {
                    this.loading = false
                    }
                )
            } else {
                this.$message.error('请填写完整')
                return false
            }
        })
    },
    /* 请求完整回调 */
    complete (req, callback) {
      req.then(callback, callback)
    },
    /* 清空数据 */
    emptyData () {
        this.$refs['form'].resetFields()
    },
    /* 取消 */
    cancel () {
        this.$parent.$parent.closeEditGra()
    },
    /* 检查手机号 */
    isCellPhone (val) {
      if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) {
        return false
      } else {
        return true
      }
    },
    /* 检查学号 */
    isCellSno (val) {
      if (!/^\d{10}$/.test(val)) {
        return false
      } else {
        return true
      }
    },
    /* 查询姓名 */
    querysName () {
        if(this.form.sNo !== ''){
            _querySname(this.form.sNo).then(res => {
                if(res.data.code == 200){
                    this.form.sName = res.data.msg
                }
                else{
                    this.$message.error(res.data.msg)
                    this.form.sName = ''
                }
            }).catch(res => {
                this.$message.error("出现错误，请联系管理员")
            })
        }
    }
  }
}
</script>

